<template>
  <div class="app-container">
    <el-table 
      style="width: 100%;" 
      v-loading="fetchLoading"
      :data="authList" 
      row-key="id" 
      border 
      highlight-current-row 
    >
      <el-table-column header-align="center" label="菜单 ID" width="100">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单标题" width="120">
        <template slot-scope="scope">
          {{ scope.row.menu_title }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单路径" width="120">
        <template slot-scope="scope">
          {{ scope.row.menu_path }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单组件名称" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.menu_component_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单组件路径" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.menu_component_path }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单重定向" width="120">
        <template slot-scope="scope">
          {{ scope.row.menu_redirect }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="高亮菜单" width="120">
        <template slot-scope="scope">
          {{ scope.row.menu_active }}
        </template>
      </el-table-column>
      <el-table-column header-align="center" label="操作方法" width="120">
        <template slot-scope="scope">
          {{ scope.row.actions }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="缓存" width="80">
        <template slot-scope="{row}">
          <el-tag
            effect="plain"
            :type="row.menu_component_cache | int2BoolTag(2)"
          >{{ row.menu_component_cache | int2BoolTag(1) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="props" width="80">
        <template slot-scope="{row}">
          <el-tag
            effect="plain"
            :type="row.menu_props | int2BoolTag(2)"
          >{{ row.menu_props | int2BoolTag(1) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="隐藏" width="80">
        <template slot-scope="{row}">
          <el-tag
            effect="plain"
            :type="row.menu_hidden | int2BoolTag(2)"
          >{{ row.menu_hidden | int2BoolTag(1) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="固定标签" width="80">
        <template slot-scope="{row}">
          <el-tag
            effect="plain"
            :type="row.affix | int2BoolTag(2)"
          >{{ row.affix | int2BoolTag(1) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="面包屑" width="80">
        <template slot-scope="{row}">
          <el-tag
            effect="plain"
            :type="row.breadcrumb | int2BoolTag(2)"
          >{{ row.breadcrumb | int2BoolTag(1) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="嵌套显示" width="80">
        <template slot-scope="{row}">
          <el-tag
            effect="plain"
            :type="row.always_show | int2BoolTag(2)"
          >{{ row.always_show | int2BoolTag(1) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否上线" width="80">
        <template slot-scope="{row}">
          <el-tag
            effect="plain"
            :type="row.status | int2BoolTag(2)"
          >{{ row.status | int2BoolTag(1) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="{row}">
          <el-button type="primary" size="small" @click="handleEdit(row.id)">编辑</el-button>
          <el-button :type="row.status | statusTag(2)" size="small" @click="handleStatus(row.id)">
            {{ row.status | statusTag(1) }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { authList, authChangeStatus } from '@/api/auth'

export default {
  name: 'AuthList',
  data() {
    return {
      authList: [],
      fetchLoading: false,
    }
  },
  created() {
    this.getAuthList()
  },
  methods: {
    // 获取列表
    async getAuthList() {
      try {
        this.fetchLoading = true
        const { data } = await authList()
        this.authList = data
      } finally {
        this.fetchLoading = false
      }
    },
    // 编辑
    handleEdit(id) {
      this.$router.push({ name: 'AuthUpdate', params: { id } });
    },
    // 上线与下线 子级也会修改
    async handleStatus(id) {
      await authChangeStatus(id)
      this.$notify.success({
        title: '成功',
        message: '操作成功',
        duration: 3000,
      });
      this.getAuthList()
    }
  },
}
</script>

<style lang="scss" scoped>

</style>